<template>
    <div id="markdownEditor"> </div>
</template>

<script setup lang="ts">
import { nextTick } from "process";
import ToastEditor from "./toastEditor"

interface IProps{
  modelValue?:string,
  height?:number,
  placeholder?:string
}
const props = withDefaults(defineProps<IProps>(),{
    modelValue:'',
    height:700,
    placeholder:'' , 
})

const emit = defineEmits(['update:modelValue'])

//编辑器加载完成再使用
nextTick(()=>{
 const toastUi=new  ToastEditor('#markdownEditor',props.modelValue,`${props.height}px`)
	toastUi.editor.on('change', (type: string) => {
		emit('update:modelValue', type == 'markdown' ? toastUi.editor.getMarkdown():toastUi.editor.getHTML())
	})
})
</script>

<style  lang="scss">
@import    "https://uicdn.toast.com/editor/latest/toastui-editor.min.css";

#markdownEditor{
    @apply bg-white;
   
   .toastui-editor-mode-switch {
		display: none !important;
	}
	.fullscreen {
	
        @apply fixed left-0 top-0 right-0 bottom-0 z-[999] bg-white;
	}
}
</style>